<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo03-事件处理</title>
  </head>
  <body>
    <div id="app">
      <h1>{{message}}</h1>
      <ul>
        <li v-for="(sport,index) of sports" v-text="sport"><li>
        <input type="text" v-model="sport" >
        <button type="button" @click="addSport">添加</button>
      </ul>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.1.3/vue.min.js"></script>
    <script type="text/javascript">
      var app = new Vue({
        el: '#app',
        data: {
          message: '事件处理',
          sport: '',
          sports: ['篮球','足球','乒乓球','羽毛球']
        },
        methods: {
          addSport() {
            this.sports.push(this.sport)
            this.sport = ''
          }
        },
      })
    </script>
  </body>
</html>
